import React, { Component } from 'react';
import { getGedanfenlei, getGedanneirong } from '../../utils/api';
import '../../style/all.css';
import './Tuijiangedan.css';

export default class Tuijiangedan extends Component {
	state = {
		currentTag: (JSON.parse(sessionStorage.getItem('gedanlocation')) && JSON.parse(sessionStorage.getItem('gedanlocation')).currentTag) || '全部',
		imgSrc: ['https://img0.baidu.com/it/u=2463141779,4258219411&fm=26&fmt=auto', 'https://img0.baidu.com/it/u=3207037086,1005361493&fm=26&fmt=auto', 'https://img1.baidu.com/it/u=2221125352,2744484500&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=480', 'https://img0.baidu.com/it/u=3180372500,687288268&fm=26&fmt=auto'],
		randomImgSrc: 0,
		tags: [],
		limit: 20,
		offset: (JSON.parse(sessionStorage.getItem('gedanlocation')) && JSON.parse(sessionStorage.getItem('gedanlocation')).offset) || 0,
		gedanList: [],
		currentPageNum: (JSON.parse(sessionStorage.getItem('gedanlocation')) && JSON.parse(sessionStorage.getItem('gedanlocation')).currentPageNum) || 1
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getGedanTags();
		this.getGedanneirongs();
		this.setState({
			randomImgSrc: Math.floor(Math.random() * 4)
		})
	}
	async getGedanTags () {
		const tags = await getGedanfenlei();
		this.setState({
			tags: tags.tags
		})
	}
	async getGedanneirongs () {
		let { currentTag, limit, offset } = this.state;
		const gedanList = await getGedanneirong(currentTag, limit, offset);
		this.setState({
			gedanList: gedanList.playlists
		})
	}
	async changeCurrentTag (tag) {
		let { limit } = this.state;
		const gedanList = await getGedanneirong(tag, limit, 0);
		this.setState({
			currentTag: tag,
			gedanList: gedanList.playlists,
			currentPageNum: 1,
			offset: 0
		})
	}
	goNext = async () => {
		let { limit, offset, currentTag, currentPageNum } = this.state;
		const gedanList = await getGedanneirong(currentTag, limit, offset + limit);
		this.setState({
			gedanList: gedanList.playlists,
			offset: offset + limit,
			currentPageNum: currentPageNum + 1
		})
	}
	goPrev = async () => {
		let { limit, offset, currentTag, currentPageNum } = this.state;
		const gedanList = await getGedanneirong(currentTag, limit, offset - limit);
		this.setState({
			gedanList: gedanList.playlists,
			offset: offset - limit,
			currentPageNum: currentPageNum - 1
		})
	}
	render () {
		let { imgSrc, randomImgSrc, tags, gedanList,currentPageNum,offset,currentTag } = this.state;
		return (
			<div className='gedan main'>
				<div className='banner'>
					<img className='backs' src={imgSrc[randomImgSrc]} alt="" />
					<div className='avator tophover'>
						<img src={imgSrc[randomImgSrc]} alt="" />
					</div>
					<h2>精品歌单</h2>
					<p>一张褪色的照片，留着淡淡的回忆，这是为您推荐的精品歌单。</p>
				</div>
				<div className='tag'>
					<ul>
						<li onClick={() => this.changeCurrentTag('全部')} className={currentTag === '全部' ? 'active red' : 'red'}>全部</li>
						{tags.map((item) => (
							<li key={item.id} onClick={() => this.changeCurrentTag(item.name)} className={currentTag === item.name ? 'active red' : 'red'}>{item.name}</li>
						))}
					</ul>
				</div>
				<div className='content'>
					<ul>
						{gedanList.map((item) => (
							<li key={item.id} onClick={() => {
								let obj = {
									currentPageNum,
									offset,
									currentTag
								}
								sessionStorage.setItem('gedanlocation', JSON.stringify(obj));
								this.props.history.push(`/gedandetail?id=${item.id}`)
							}} className='perse20'>
								<div className='img tophover'>
									<img width='100%' height='100%' src={item.coverImgUrl} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p>{item.name}</p>
							</li>
						))}
					</ul>
					<div className='page'>
						{currentPageNum < 2 ? null : <span onClick={this.goPrev}>&lt;前往上一页</span>}
						<span onClick={this.goNext}>前往下一页&gt;</span>
					</div>
				</div>
			</div>
		)
	}
}
